<template>
	<view class="container">
		
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
	<swiper-item v-for="item in data.swiper">
	<image :src="item.img"></image>
	</swiper-item>
	</swiper>
	
	<view class="price">
		<text class="cur">￥{{data.info.sell_price}}</text>
		<text class="pre">￥{{data.info.market_price}}</text>
	</view>
	<view class="title">{{data.info.title}}</view>
	
	<view class="some-info">
		<view>货号：{{data.info.goods_no}}</view>
		<view>库存：{{data.info.stock_quantity}}</view>
	</view>
	<view class="detail">
		<view>详细介绍</view>
	</view>
	<view class="content">
		<rich-text :nodes="data.content"></rich-text> <!-- 渲染富文本 -->
	</view>
	<view >
		<van-goods-action>
		  <van-goods-action-icon icon="chat-o" text="客服" />
		  <van-goods-action-icon icon="cart-o" text="购物车"  />
		  <van-goods-action-button
		    text="加入购物车"
		    type="warning"
		   
		  />
		  <van-goods-action-button text="立即购买"  />
		</van-goods-action>
	</view>
	
	</view>
</template>

<script setup>
import { reactive } from "vue";
import {apiRequest} from '../../utils/apiRequest.js'
import { onShow, onHide,onLoad } from "@dcloudio/uni-app"

const data = reactive({
	id:'',
	info:'',
	swiper:[],
	content:'',
})
const methods = {
	// 获取商品轮播图
	getSwiper(){
		apiRequest({
			url:'/api/getlunbo'
		}).then(res => {
			data.swiper = res.data.message
			console.log(data.swiper)
		})
	},
	// 获取商品信息
	getGoodsInfo(){
		apiRequest({
			url:'/api/goods/getinfo/' + data.id
		}).then(res => {
			data.info = res.data.message[0]
			console.log(res.data.message)
		})
	},
	// 获取商品详情
	getGoodsDetail(){
		apiRequest({
			url:'/api/goods/getdesc/' + data.id
		}).then(res => {
			data.content = res.data.message[0].content
		})
	}
}

onLoad((options) => { // option为url传递的参数
	data.id = options.id
	methods.getGoodsInfo()
	methods.getSwiper()
	methods.getGoodsDetail()
})
</script>

<style lang="scss">
	.container{
		background:$shop-color;
	}
swiper{
	width: 750rpx;
	height: 380rpx;
}
image{
	height: 100%;
	width: 100%;
}
.price{
	background: white;
	margin-top: 15rpx;
	padding: 15rpx;
	.cur{
		margin-right: 15rpx;
		color: red;
		font-size: 45rpx;
	}
	.pre{
		font-size: 35rpx;
		text-decoration:line-through;
	}
}
.title{
	background: white;
	font-size: 30rpx;
	padding: 15rpx;
}
.some-info{
	background: white;
	margin-top: 15rpx;
	padding: 15rpx;
}
.detail{
	margin-top: 15rpx;
	background: white;
	padding: 15rpx;
}
p{
	background: white;
}
</style>
